<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态表格</title>
    <style>
      body {
        text-align: center;
      }

      table,
      th,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        margin: 50px auto;
        padding: 10px 50px;
        text-align: center;
      }

      img {
        width: 100px;
        height: 100px;
      }

      tbody input[type='text'] {
        width: 20px;
        height: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        商品表
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="all" />
          </th>
          <th>序号</th>
          <th>商品名称</th>
          <th>图片</th>
          <th>商品类型</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="data">
        <!-- 数据动态加载... -->
      </tbody>
    </table>

    <a href="#">上一页</a>
    <a href="#">下一页</a>

    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
    <script>
      //商品的构造函数
      function Item(name, pic, type, price) {
        this.name = name
        this.pic = pic
        this.type = type
        this.price = price
      }

      //渲染数据
      function showData() {
        $(items).each(function (idx, item) {
          $('#data').append(
            `<tr><td><input type='checkbox' class='sub'/></td><td>${idx + 1}</td><td>${item.name}</td><td><img src='../img/${item.pic}'/></td><td>${item.type}</td><td>${item.price}</td>
              <td><button>－</button> <input type='text' value='1' maxlength='2' class='amount'/> <button>＋</button></td><td><a href='#'>删除</a></td></tr>`
          )
        })
      }

      //初始化商品
      const item1 = new Item('iPhone 15', 'iphone15.jpg', '手机', 9999)
      const item2 = new Item('iPad Pro', 'ipad.jpg', '平板电脑', 9299)
      const item3 = new Item('Apple Watch Ultra 2', 'iWatch.jpg', '手表', 6499)
      const item4 = new Item('AirPods', 'AirPods.jpg', '耳机', 1399)
      const item5 = new Item('AirTag', 'AirTag.jpg', '周边配件', 249)
      const item6 = new Item('Apple Watch Series 9', 'Apple Watch Series 9.jpg', '手表', 2999)
      const item7 = new Item('MacBookPro', 'MacBookPro.jpg', '电脑', 15999)
      const item8 = new Item('Pro Display XDR', 'Pro Display XDR.jpg', '显示器', 39999)
      const item9 = new Item('iPhone SE', 'iPhone SE.jpg', '手机', 3499)
      const item10 = new Item('iMac', 'iMac.jpg', '电脑', 9999)

      //定义数组
      const items = [item1, item2, item3, item4, item5, item6, item7, item8, item9, item10]
      showData()

      //删除功能
      $('tbody a').click(function () {
        confirm('确定要删除吗?') ? $(this).parent().parent().remove() : ''
      })

      //修改数量
      //获取+按钮
      $('button').click(function () {
        if ($(this).html() == '＋') {
          const input = $(this).prev()
          input.val(input.val() - 0 + 1)
          if (input.val() > 99) {
            input.val(99)
          }
        } else {
          const input = $(this).next()
          input.val($(this).next().val() - 1)
          if (input.val() < 1) {
            input.val(1)
          }
        }
      })

      //阻止文本框的右击操作
      $('.amount').contextmenu(function () {
        //preventDefault()用来阻止元素的默认行为
        event.preventDefault()
      })

      //验证数量文本框的键盘事件
      $('.amount').keyup(function () {
        let amount = $(this).val()
        if (isNaN(amount)) {
          $(this).val(1)
        }
      })

      //全选
      $('#all').click(function () {
        if ($(this).prop('checked')) {
          $('.sub').prop('checked', true)
        } else {
          $('.sub').prop('checked', false)
        }
      })

      $('.sub').click(function () {
        if (Array.from($('.sub')).filter(ck => ck.checked == true).length == Array.from($('.sub')).length) {
          $('#all').prop('checked', true)
        } else {
          $('#all').prop('checked', false)
        }
      })
    </script>
  </body>
</html>
